.following-edit {
	ul {
		list-style-type: none;
		margin: 0;
	}

	.form-input-validation {
		margin-top: -1em;
		margin-bottom: -1em;
	}

	.notice {
		margin-bottom: 13px;
	}

	.foldable-card.card,
	.foldable-card.card.is-expanded {
		margin-bottom: 0;
	}

	// Override the display: flex; here to avoid breaking
	// the positioning of the fadeoverlay.
	.foldable-card__header,
	.foldable-card__main {
		display: block;
	}

	.follow-button__label {

		@include breakpoint( "<660px" ) {
			display: none;
		}
	}

	.external-link .gridicons-external {
		margin-left: 4px;
	}
}

.is-reader-page .follow-button {
	border: 0;
	border-radius: 0;
	float: right;
}

.is-reader-page .search-card.card {
	box-shadow: 0 0 0 2px transparentize( lighten( $gray, 20% ), .5 ), 0 1px 2px lighten( $gray, 30% );
}

// The header on top of the "Existing Feed"
.section-header.following-edit__header {
	height: 51px;
	margin-top: 34px;

	.section-header__actions {
		transition: all 0.15s ease-in-out;
	}

	.button {
		color: $gray;
		font-weight: 600;
		font-size: 12px;
		text-transform: capitalize;
	}

	.is-searching & {
		pointer-events: none;

		.section-header__actions {
			transform: translateX( -30px );
		}
	}
}

// More Options
.following-edit__more-options {
	float: left;
	margin-right: 16px;

	.gridicon {
		fill: $gray;
		position: relative;
			top: 2px;
		cursor: pointer;

		&:hover {
			fill: $blue-medium;
		}
	}
}

// Sort Controls
.following-edit__sort-controls {
	float: left;
	margin-right: 8px;

	label {
		display: none;
	}

	.is-compact {
		color: $gray;
		font-size: 12px;
		line-height: 1.3;
		margin-left: 0;
		padding: 5px 20px 6px 6px;

		&:hover {
			border-color: lighten( $gray, 10% );
		}
	}
}

.following-edit__search {
	margin-right: 0;
	padding: 0;

	.gridicons-search {
		color: $blue-wordpress;
	}

	&.button.is-borderless .gridicons-search {
		top: 4px;
	}

	&:focus .gridicons-search {
		color: $blue-light;
	}
}

.is-reader-page .following-edit__subscribe-form .card.is-search-result {
	top: 71px;
	box-shadow: 0 0 0 2px transparentize( lighten( $gray, 20% ), .5 ), 0 1px 2px lighten( $gray, 30% );
}

// Add to Following
.following-edit__subscribe-form {
	position: relative;
	padding-top: 18px;

	.search {
		margin-bottom: 0;
		z-index: z-index( '.following-edit', '.following-edit__subscribe-form .search' );
	}

	.search__input[type="search"] {
		height: 50px;
	}

	.card.is-search-result {
		position: absolute;
			top: 70px;
		width: 100%;
		z-index: z-index( '.following-edit', '.following-edit__subscribe-form .card.is-search-result' );

		&.is-compact {
			padding: 16px 24px;
		}

		&.is-valid {

			.gridicon {
				fill: $blue-medium;

				&:hover,
				&:active {
					cursor: pointer;
				}
			}

			.reader-list-item__icon .gridicon {
				fill: $white;
			}

			.follow-button {
				cursor: pointer;
			}

			.follow-button__label {
				color: $blue-medium;
			}

			.following-edit__list-title {
				margin-top: 8px;
				margin-bottom: 11px;
			}
		}
	}
}

// Existing Feed Search

.following-edit > .search-card {
	position: relative;
	margin-top: -58px;
	margin-bottom: 1px;
	opacity: 0;
	pointer-events: none;
	transition: all 0.15s ease-in-out;

	@include breakpoint( ">480px" ) {
		margin-top: -52px;
	}
}

// Followed Sites and Search Transitions
.following-edit__sites,
.following-edit > .search-card,
.following-edit .no-results {
	transition: all 0.2s ease-in-out;
}

.following-edit .no-results {
	@include breakpoint( "<660px" ) {
		text-align: center;
	}
}

.following-edit.is-searching > .search-card {
	opacity: 1;
	pointer-events: auto;
}

// Followed Site Cards
.following-edit .reader-list-item__card {

	&.is-placeholder {

		height: 74px;

		.reader-list-item__title,
		.reader-list-item__description {
			margin: 1px 0 0 91px;

			@include breakpoint( ">480px" ) {
				margin-left: 83px;
			}
		}

		.following-edit__list-title {
			margin-top: -3px;
		}

		.following-edit__list-url {
			margin-top: 4px;
			width: 25%;
		}

		.reader-list-item__icon {
			left: 42px;
		}
	}

	.reader-list-item__title,
	.reader-list-item__description {
		margin-right: 100px;

		@include breakpoint( ">660px" ) {
			margin-right: 100px;
			padding-left: 3px;
		}
	}

	.reader-list-item__icon {
		top: 14px;
	}
}

.following-edit.has-no-subscriptions .reader-list-item__card {

	&.is-placeholder {
		.reader-list-item__icon {
			left: 17px;
		}

		.reader-list-item__title,
		.reader-list-item__description {
			margin-left: 68px;

			@include breakpoint( ">480px" ) {
				margin-left: 55px;
			}
		}
	}
}

.following-edit-navigation {
	min-height: 25px;
	margin-bottom: 0.5em;
}

.following-edit-navigation__site-count {
	color: $gray;
}

.following-edit__notification-settings-card {
	background-color: $gray-light;
	position: relative;
	color: $gray-dark;

	&.is-compact {
		padding: 10px 16px;

		@include breakpoint( ">660px" ) {
			padding-left: 105px;
		}
	}

	&.is-impossible-to-send-email {
		color: $gray;
		padding-left: 22px;

		p {
			text-align: center;
			margin-top: 10px;
			margin-bottom: 10px;
		}
	}

	&.is-active {
		.following-edit__form-toggle-status	{
			color: $blue-medium;
		}
	}

	.following-edit__form-toggle-wrapper {
		position: absolute;
			right: 16px;
	}

	.following-edit__form-toggle-status {
		text-transform: uppercase;
		padding-right: 12px;
		padding-top: 2px;
		color: #4f748e;
		font-size: 13px;
	}

	.segmented-control {
		margin-top: 6px;
		margin-bottom: 6px;
		width: 250px;
	}

	.form-toggle__switch {
		margin-top: -4px;
	}
}

.following-edit__settings-toggle {
	position: absolute;
		left: 0;
		top: 0;
	cursor: pointer;
	padding: 26px 8px 20px;

	.gridicon {
		fill: $gray;
		transform: rotate( 0deg );
		transition: transform .15s cubic-bezier( 0.175, .885, .32, 1.275 ), color .20s ease-in;

		.is-expanded & {
			transform: rotate( 90deg );
		}
	}
}

.following-edit__notification-settings-error {
	margin-top: 14px;
}

.is-section-reader .main.following-edit .empty-content {
	margin-top: -40px;
}

.following-edit .reader-list-item__actions {
	top: 21px;
}

.following-edit .reader-list-item__actions .follow-button {

	.gridicon {
		fill: $blue-medium;
	}

	.follow-button__label {
		color: $blue-medium;
	}

	&.is-following {

		.gridicon {
			fill: $alert-green;
		}

		.follow-button__label {
			color: $alert-green;
		}
	}
}
